<!-- <template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu active-text-color="#ffd04b" background-color="#545c64"
                default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose">
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>首页</span>
                    </template>
                    <el-menu-item-group title="轮播图管理">
                        <el-menu-item index="1-1">轮播图列表</el-menu-item>
                        <el-menu-item index="1-2">发布轮播图</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="导航管理">
                        <el-menu-item index="1-3">添加导航</el-menu-item>
                        <el-menu-item index="1-4">导航列表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <span>考试管理</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <el-icon>
                        <document />
                    </el-icon>
                    <router-link to="/layout/urse_list"><span>用户管理</span></router-link>
                </el-menu-item>
                <el-menu-item index="4">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>系统设置</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
</script>

<style scoped lang="scss">
.el-row {
    
}
</style> -->


<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu default-active="2" @open="handleOpen" @close="handleClose">
                <div v-for="(item, i) in menus">
                    <!-- 有下拉菜单 -->
                    <el-sub-menu :index="item.index" v-if="item?.childs">
                        <template #title>
                            <el-icon>
                                <!-- <location /> -->
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.text }}</span>
                        </template>
                        <!-- 子菜单 -->
                        <el-menu-item-group v-for="opt in item.childs" :title="opt.title">
                            <el-menu-item 
                            v-if="opt?.arr" 
                            v-for="obj in opt.arr" 
                            :index="obj.index"
                            @click="addTabEvent(obj.name, obj.id, obj.path)"
                            >{{ obj.name}}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>

                    <!-- 没有下拉菜单 -->
                    <el-menu-item :index="item.index" v-else  
                        @click="addTabEvent(item.name, item.id, item.path)">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.text }}</span>
                    </el-menu-item>
                </div>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
// 导入storeToRefs函数
import {storeToRefs} from 'pinia'
import { useRouter, useRoute } from 'vue-router'

// 导入 “tab” 数据存储模块
import { useTabStore } from '../stores/tabBar'
import { useMenuStore } from '../stores/menu'
// 获取“tab”存储对象
const tabStore = useTabStore()
// 获取“menu”储存对象
const menuStore = useMenuStore()
// 获取pinia储存中的“菜单”数组
let { menus } = storeToRefs(menuStore)
// 获取路由实例对象
const $router = useRouter();
// 点击 “侧栏菜单” 在右侧内容区域显示
const addTabEvent = (name:string,id:string,path:string) => {
    // 添加顶部栏的导航
    tabStore.add({name, id, path})
    // console.log("URL:",path)
    // 路由跳转组件
    $router.push({path})
}

const handleOpen = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    // console.log(key, keyPath)
}

// 刷新页面也能看到这个topbar的导航文本
// console.log($router);
const $route = useRoute();
const path = $route.path;
let data = menus.value;
let opt: any = {}
// console.log($route.path)
// console.log(menus)
for(let i = 0 ; i < data.length ; i ++){
    if(data[i].childs){
        // 继续循环
        let childs: any = data[i].childs;
        for(let j = 0 ; j < childs.length; j ++){
            if(childs[j].arr){
                let arr = childs[j].arr
                for(let k = 0 ; k< arr.length ; k ++){
                    if(arr[k].path == path) {
                            // console.log("111")
                            opt.name = data[i].name;
                            opt.id = data[i].id;
                        break;
                    }
                }
            }
        }   
    }
    else {
        if(data[i].path == path) {
            opt.name = data[i].name;
            opt.id = data[i].id;
            break;
        }
    }
}
// 初始化
// console.log(path);

if(path !='/'){
    tabStore.add(opt)
}
</script>